<template>
  <v-chart
    style="width: 100%; height: 100%"
    class="chart"
    :option="option"
    autoresize
  />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent, defineProps } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
// const props = defineProps({
//   themeColor: {
//     type: String || Object || Array,
//     default: 'dark'
//   }
// })

const option = ref({
  backgroundColor: "#ffffff",
  title: {
    text: "",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },

  legend: {
    top: "0%",
    left: "right",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["55%", "70%"],
      center: ["50%", "50%"],
      data: [
        // { value: 0, name: "低" },
        // { value: 0, name: "一般" },
        // { value: 0, name: "较大" },
        // { value: 0, name: "重大" },
      ],
      labelLine: {
        show: false,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});

const setData = (data) => {
  option.value = {
    backgroundColor: "#ffffff",
    title: {
      text: "",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
    },

    legend: {
      top: "0%",
      left: "right",
    },
    series: [
      {
        name: "数据",
        type: "pie",
        radius: ["55%", "70%"],
        center: ["50%", "50%"],
        data,
        labelLine: {
          show: false,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
};
defineExpose({
  setData,
});
</script>

<style scoped>
.chart {
  /* width: 100%; */
  min-height: 350px !important;
}
</style>
